<template>
	<view class="">
		<form @submit="formSubmit">
			<view class="list">
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						计划经营
					</view>
					<view class="acea-row row-middle row-right item-r" @click="openBusinessFormat('category')">
						<input class="input-r" type="text" placeholder="请选择计划经营行业" placeholder-class="placeholder-class"
							v-model="categoryName" disabled />
						<!-- categoryId<input class="industry-ipt" type="text" v-model="industry" placeholder="请输入" placeholder-class="placeholder-class"> -->
					</view>
				</view>
				<manage ref="category" @confrim="categoryConfrim" :selectParent="true"></manage>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						面积范围
					</view>
					<!-- <view class="item-r sanjiao-right">
					<view class="no-data-r">请选择面积范围</view>
				</view> -->
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" placeholder="示例:20" placeholder-class="placeholder-class" v-model="area1"
							@input="fillTitle">㎡—
						<input type="number" placeholder="示例:30" placeholder-class="placeholder-class" v-model="area2"
							@input="fillTitle">㎡
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label ">
						租金范围
					</view>
					<!-- <view class="item-r sanjiao-right">
					<view class="no-data-r">请选择租金范围</view>
				</view> -->
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" placeholder="示例:20" placeholder-class="placeholder-class"
							v-model="rent1">元—
						<input type="number" placeholder="示例:30" placeholder-class="placeholder-class" v-model="rent2">元
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						期望区域
					</view>
					<view class="item-r sanjiao-right" @click="goServiceArea">
						<input class="input-r" type="text" placeholder="请选择三个期望区域" placeholder-class="placeholder-class"
							v-model="regionName" disabled />
					</view>
				</view>
				<serviceArea ref="serviceArea" dataType="area" @area="handleArea" />
				<!-- 联系人 -->
				<view class="acea-row row-middle row-between item ">
					<view class="label label-m">
						联系人
					</view>
					<view class="add-icon" @click="addContact">
						<image src="../static/images/add_icon.png" mode=""></image>
					</view>
				</view>
				<view class="item border-b">
					<!-- 	<view class="contact-list">
						<view class="acea-row row-middle row-between contact-p" v-for="(item,index) in contactList"
							:key="index">
							<view class="acea-row row-middle row-between contact-r">
								<view class="add-icon" @click="deleteContact(index)">
									<image src="../static/images/sub_icon.png" mode=""></image>
								</view>
								<view class="name" @click="toPage('/pages/releases/addShopContact/addShopContact?info='+JSON.stringify(item) + '&infoIndex='+index)">{{item.username}}</view>
								<view class="gray-text" v-if='item.type == 1'>
									房东
								</view>
								<view class="gray-text" v-if='item.type == 2'>
									老板
								</view>
								<view class="gray-text" v-if='item.type == 3'>
									雇员
								</view>
								<view class="gray-text"
									@click="toPage('/pages/releases/addShopContact/addShopContact?info='+JSON.stringify(item) + '&infoIndex='+index)">
									{{item.phone}}
								</view>
							</view>
							<view class="acea-row row-middle check-box" v-if="item.open == 0">
								<image src="../static/images/checkbox_no.png" mode="" @click="openChange(item,1)">
								</image>
								<text>公开</text>
							</view>
							<view class="acea-row row-middle check-box" v-if="item.open == 1">
								<image src="../static/images/checkbox_on.png" mode="" @click="openChange(item,0)">
								</image>
								<text>公开</text>
							</view>
						</view>
					</view> -->
					<chooseContact :list="contactList" :dataform="dataform" @add="d=>contactList.push(d)"
						@del="toDel" />
				</view>
				<!-- 配套要求 -->
				<view class="module">
					<!-- <view class="acea-row row-middle row-between">
						<view class="module-title">
							配套要求
						</view>
						<view class="add-advantage red-sanjiao-r" @click="addAd">
							没找到合适的？选择自定义
						</view>
					</view>
					<view class="acea-row advantage-list">
						<view class="itemBox" v-for="(item,index) in advantages" :key="index">
							<icon type="cancel" color="#000" size="14" @click="closeAdvantages(item,index)"
								class="close" />
							<view class="item" :class="advantageIds.indexOf(index)!=-1?'item-on':''"
								@click="advantageChecked(item,index)">{{item}}</view>
						</view>
					</view> -->
					<chooseKeywords title="配套要求" :advantages="advantages" type="1" :typeOn="typeOn"
						:storeAdvantage="storeAdvantage" :advantageIds="advantageIds"
						@storeAdvantage="val=>(storeAdvantage=val)" @advantageIds="val=>(advantageIds=val)"
						@advantages="val=>(advantages=val)" />
				</view>
				<!-- 补充要求 -->
				<view class="module">
					<view class="module-title">
						补充要求
					</view>
					<view class="textacea-box">
						<textarea placeholder="请输入补充要求" v-model="dataform.details" name='details'
							:maxlength="maxLength"></textarea>
						<view class="num-text">
							{{dataform.details.length}}/{{maxLength}}
						</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						标题
					</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" placeholder="请输入标题" placeholder-class="placeholder-class"
							v-model="dataform.title" name='title' />
					</view>
				</view>
			</view>

			<!-- 按钮 -->
			<view class="acea-row row-between btns">
				<view class="white-btn" @click="formSubmit(1)">继续完善</view>
				<button class="red-btn" @click="formSubmit(2)">完成</button>
			</view>
		</form>
		<addKeyWord ref="addKeyWord" @addConfirm="addConfirm" />
	</view>
</template>

<script>
	import {
		Debounce
	} from '@/utils/validate.js'
	import {
		InformationGroupAdd,
		GroupDetailApi,
		editPhzasInfo,
		editInfo
	} from "@/api/subletOfShop.js"
	import {
		getLocation,
		getCategory,
		toPage
	} from '@/filters/commFilter.js';
	import manage from "../components/manage.vue"
	import serviceArea from '../components/area.vue';
	import addKeyWord from '../components/addKeyWord/addKeyWord.vue'
	import chooseKeywords from '../components/chooseKeywords.vue'
	import chooseContact from '../components/chooseContact.vue'
	export default {
		components: {
			manage,
			serviceArea,
			addKeyWord,
			chooseKeywords,
			chooseContact
		},
		props: ['typeOn', 'categoryOn', 'editId', 'st', 'storeCategory'],
		data() {
			return {
				storeAdvantage: [],
				rent1: '', // 租金
				rent2: '', // 租金
				area1: '', // 面积
				area2: '', // 面积2
				industry: '', //经营行业input
				propertyArea: '', //产权面积
				usableArea: '', //使用面积
				rentPriceM: '', //月租金
				transferPrice: '', //转让费
				rentMeet: false, //月租金是否面议
				transferMeet: false, //转让费是否面议
				shopAddress: '', //商铺地址
				shopName: '', //店铺名称
				floor: 1, //楼层
				floorCount: 1, //楼层层数
				title: '', //标题
				contactList: [],
				advantages: [], //店铺优势
				advantageIds: [],
				maxLength: 200,
				hopeProvince: '',
				hopeCity: '',
				askRent: {},
				categoryName: null,
				regionName: '', //期望区域名
				dataform: {
					details: '',
					hopeProvince: '',
					hopeCity: ''
				},
				sts: 0
			}
		},
		async mounted() {
			let that = this
			if (this.editId) {
				// console.log('edit',this.editId)
				this.getDetail();
			} else {

				this.dataform.city = this.$cityCode ? this.$cityCode[1] : '';
				this.dataform.province = this.$cityCode ? this.$cityCode[0] : '';
				this.dataform.district = this.$cityCode ? this.$cityCode[2] : '';
			}
			getApp().globalData.initContact()
			uni.$on('askRent', function(data) {
				that.askRent = data
			});


			let {
				latitude,
				longitude
			} = await getLocation();
			this.dataform = {
				...this.dataform,
				latitude,
				longitude
			};
		},
		watch: {
			categoryOn(val) {
				this.fillTitle()
			},
			area2() {
				this.fillTitle()
			}
		},
		methods: {
			toPage,
			//添加配套要求
			addAd() {
				this.$refs.addKeyWord.popupShow = true
			},
			addConfirm(e) {
				this.advantages = this.advantages.concat(e)
			},
			//计划经营多选框
			openBusinessFormat() {
				this.$refs.category.filtrateShow = true;
			},
			//确认选择经营后触发
			categoryConfrim(val) {
				this.dataform.categoryId = val.selectedIds;
				this.categoryName = val.name;
				this.fillTitle()
			},
			//去选择期望区域
			goServiceArea() {
				this.$refs.serviceArea.filtrateShow = true;
			},
			//期望区域
			handleArea(areaInfo) {
				this.dataform.hopeArea = areaInfo.districtIds;
				this.regionName = areaInfo.regionName;
				this.dataform.hopeProvince = areaInfo.hopeProvince;
				this.dataform.hopeCity = areaInfo.hopeCity;

			},
			//自动填充标题
			fillTitle() {
				if (this.editId && this.title) {
					return;
				}
				const {
					categoryId,
					title
				} = this.dataform;
				const category = getCategory(this.categoryOn).name;
				this.dataform.title = categoryId && this.area1 && this.area2 ? '求租' + this.area1 +
					'-' + this.area2 + '㎡' + this.categoryName + category : title;
				this.$forceUpdate();
			},
			formSubmit(status) {
				let that = this;
				if (this.sts !== 0 && status !== 1) {
					uni.navigateBack()
					return;
				}

				if (!that.area1 || !that.area2) return that.$util.Tips({
					title: '请输入面积范围'
				});
				// if (!that.rent1 || !that.rent2) return that.$util.Tips({
				// 	title: '请输入租金范围'
				// });
				if (!that.dataform.hopeArea.split(',').length >= 3) return that.$util.Tips({
					title: '请选择至少三个期望区域'
				});
				if (that.contactList.length == 0 || !that.contactList) return that.$util.Tips({
					title: '请输入输入联系人'
				});

				this.dataform.area = that.area1 + '-' + that.area2
				this.dataform.rent = that.rent1 + '-' + that.rent2
				this.dataform.storeAdvantage = that.storeAdvantage.join('/')
				this.dataform.contacts = that.contactList.map(item => {
					const {
						id,
						type,
						open,
						were
					} = item;
					return {
						contactId: id,
						identity: type,
						open,
						were
					}
				})
				Object.keys(that.askRent).forEach((item) => {
					this.dataform[item] = that.askRent[item] ? that.askRent[item] : ''
				})

				this.dataform.storeCategory = getCategory(that.categoryOn).value;
				this.dataform = {
					...this.dataform,
					...this.$location
				}
				uni.showLoading()
				//编辑
				if (this.editId) {
					this.dataform.askrentId = this.editId;
					editPhzasInfo(this.dataform).then(res => {
						uni.hideLoading()
						if (res.code == 200) {
							this.sts = status;
							if (status == 1) {
								that.continueFillIn(res.data.askrentId);
							} else {
								that.$util.Tips({
									title: '编辑成功'
								}, {
									tab: 2,
									url: '/pages/releases/rentalStores/rentalStores'
								})

							}

						}
					}).catch(e => {
						uni.hideLoading()
						this.$util.Tips({
							title: '系统异常'
						})
					})
				} else {
					//新增
					InformationGroupAdd(this.dataform).then(res => {
						uni.hideLoading()
						if (res.code == 200) {
							console.log('status', status)
							if (status == 1) {
								that.continueFillIn(res.data.askrentId);
							} else {
								let that = this;
								this.$util.Tips({
									title: '发布完成'
								}, {
									tab: 2,
									url: '/pages/releases/rentalStores/rentalStores'
								})
							}

						}
					}).catch(e => {
						uni.hideLoading()
						this.$util.Tips({
							title: '系统异常'
						})
					})
				}

			},
			toDel(index, info, callback) {
				if (info) {
					this.contactList.splice(index, 1, info);
				} else {
					this.contactList.splice(index, 1);
				}
				callback && callback();
			},
			deleteContact(index) {
				this.contactList.splice(index, 1)
			},
			openChange(row, index) {
				row.open = index
			},
			addContact() {
				uni.navigateTo({
					url: '/pages/releases/addShopContact/addShopContact'
				})
			},
			continueFillIn(id) {
				// 商铺出租资料完善
				uni.navigateTo({
					url: '/pages/releases/continueFillin/askRent?id=' + id
				})
			},
			//删除标签
			closeAdvantages(item, index) {
				this.advantages.splice(index, 1)
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
					this.storeAdvantage.splice(index, 1)
				}
			},
			advantageChecked(item, index) {
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
					this.storeAdvantage.splice(index, 1)
				} else {
					this.advantageIds.push(index);
					this.storeAdvantage.push(item)
				}
			},
			getDetail() {
				let that = this;
				GroupDetailApi(this.editId, {
					storeCategory: this.storeCategory
				}).then(res => {
					console.log('detail', res)
					if (res.code == 200) {
						this.dataform = res.data
						that.area1 = this.dataform.area.split('-')[0]
						that.area2 = this.dataform.area.split('-')[1]
						// this.dataform.area = that.area1 + '-' + that.area2
						that.rent1 = this.dataform.rent.split('-')[0]
						that.rent2 = this.dataform.rent.split('-')[1]
						// this.dataform.rent. = that.rent1 + '-' + that.rent2
						// that.storeAdvantage = this.dataform.storeAdvantage.split('/')
						if (this.dataform.contacts && this.dataform.contacts.length > 0) {

							this.contactList = this.dataform.contacts.map(item => ({
								...item,
								username: item.contactName,
								phone: item.contactPhone,
								id: item.contactId,
								type: item.contactType
							}))
							delete this.dataform.contacts
						}
						this.categoryName = this.dataform.categoryName
						this.regionName = this.dataform.hopeAreaName ? this.dataform.hopeAreaName : ''
						this.dataform.storeAdvantage && this.dataform.storeAdvantage.trim().split('/').forEach((
							item, index) => {
							let ind = this.advantages.indexOf(item);
							if (ind == -1) {
								this.advantages.push(item)
								this.storeAdvantage.push(item)
								this.advantageIds.push(this.advantages.length - 1)
							} else {
								this.advantageIds.push(ind)
								this.storeAdvantage.push(this.advantages[ind])
							}

						})
					} else {
						this.$util.Tips({
							title: res.message
						})
					}

				}).catch(e => {
					this.$util.Tips({
						title: e
					})
				})
			}

		}

	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.industry-ipt {
		width: 186rpx;
		height: 54rpx;
		border: 1px solid rgba(238, 238, 238, 1);
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(212, 212, 212, 1);
		text-align: center;
	}
</style>